import React from "react";

// 导入组件 
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';

// 导入api
import api from '../../api/api'

// 导入导航菜单的图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

// 导入组件自身的样式文件
import './index.scss'

// 导入字体图标库的字体文件
import '../../assets/fonts/iconfont.css'

// 导入城市定位函数
import { getCurrentCity } from '../../utils/index'

// 导航菜单数据
const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/list'
  },
  {
    id: 2,
    img: Nav2,
    title: '合租',
    path: '/home/list'
  },
  {
    id: 3,
    img: Nav3,
    title: '地图找房',
    path: '/home/map'
  },
  {
    id: 4,
    img: Nav4,
    title: '去出租',
    path: '/home/list'
  },
]

// 获取地理位置信息
// navigator.geolocation.getCurrentPosition(position => {
//   console.log("地理位置信息", position);
// })

export default class Index extends React.Component {
  state = {
    switch: [],  // 轮播图的状态数据
    isSwiperLoaded: false, // 轮播图的状态数据获取成功再渲染轮播图 
    groups: [],// 租房小组数据
    news: [],// 最新资讯
    curCitName: '上海',// 当前城市名称
  }

  // 获取轮播图数据 
  async getSwipers() {
    const res = await api.get('/home/swiper')

    this.setState({
      switch: res.data.body,
      isSwiperLoaded: true
    })

  }

  // 获取租房小组数据
  async getGroups() {
    const res = await api.get('/home/groups', { area: 'AREA%7C88cff55c-aaa4-e2e0' })
    this.setState(() => {
      return {
        groups: res.data.body
      }
    })
  }

  // 获取最新资讯的数据 
  async getNews() {
    const res = await api.get('/home/news', { area: 'AREA%7C88cff55c-aaa4-e2e0" -H "accept: application/json' })
    this.setState(() => {
      return {
        news: res.data.body
      }
    })
  }

  // 渲染轮播图结构
  renderSWipers() {
    return this.state.switch.map(item => (
      <img
        key={item.id}
        src={`http://localhost:8080${item.imgSrc}`}
        alt={item.id}
        style={{ width: '100%', height: '212px', verticalAlign: 'top' }}
      />
    ))
  }

  // 渲染导航菜单，Item
  renderNavs() {
    return navs.map(item =>
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </Flex.Item>
    )
  }

  // 渲染最新资讯
  renderNews() {
    return (
      this.state.news.map(item => (
        <div className="nwes-item" key={item.id}>
          <div className="imgwrap">
            <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
          </div>
          <Flex direction="column">
            <Flex.Item>
              <h3 className="title">{item.title}</h3>
              <Flex className="info" justify="between">
                <span>{item.from}</span>
                <span className="date">{item.date}</span>
              </Flex>
            </Flex.Item>
          </Flex>
        </div>
      ))
    )
  }

  // 组件渲染完成时触发
  async componentDidMount() {
    this.getSwipers()
    this.getGroups()
    this.getNews()

    // 获取当前定位城市
    const curCity = await getCurrentCity()
    this.setState({
      curCitName: curCity.label
    })

    // 从本地中获取切换城市数据  label,value
  const hkzf_city = JSON.parse(localStorage.getItem('hkzf_city')) 
  console.log(hkzf_city);
  if(hkzf_city){ 
    this.setState({
      curCitName:hkzf_city.label
    })
  }
  }

  render() {
    return (
      <div className="index">
        {/* 走马灯 */}
        <div className="swiper">
          {
            this.state.isSwiperLoaded ?
              <Carousel autoplay infinite>
                {this.renderSWipers()}
              </Carousel> : ''
          }

          {/* 搜索框 */}
          <Flex className="search-box">
            {/* 左边白色区域 */}
            <Flex className="search">
              {/* 位置 */}
              <div className="location" onClick={() => this.props.history.push('/citylist')}>
                <span>{this.state.curCitName}</span>
                <i className="iconfont icon-zhankai"></i>
              </div>
              {/* 搜索表单 */}
              <div className="form" onClick={() => this.props.history.push('/search')}>
                <i className="iconfont icon-sousuo"></i>
                <span>请输入小区或地址</span>
              </div>
            </Flex>
            {/* 右边地图图标 */}
            <div className="icon-wrap" onClick={() => this.props.history.push('/map')}>
              <i className="iconfont icon-ditu icon-map"></i>
            </div>
          </Flex>
        </div>

        {/* 导航菜单 */}
        <Flex className="nav">
          {this.renderNavs()}
        </Flex>

        {/* 租房小组 */}
        <div className="group">
          <h3 className="title">
            租房小组 <span className="more">更多</span>
          </h3>
          <Grid
            data={this.state.groups}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={(item) => (
              <Flex className="group-item" >
                <div className="desc">
                  <p className="desc-title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              </Flex>
            )} />
        </div>

        {/* 最新资讯 */}
        <div className="information">
          <WingBlank size="md">
            <h3 className="information-title">最新资讯</h3>
            {this.renderNews()}
          </WingBlank>
        </div>
      </div>
    )
  }
}